var conTitles = document.querySelectorAll('.container-titles .con-box');  //标题集合
var conImgs = document.querySelectorAll('.container-imgs a');  //图片集合
var conBtnLeft = document.querySelector('.con-left');
var conBtnRight = document.querySelector('.con-right');
var curIndex = 0;
function removeActive() {
    conTitles.forEach(item => {
        item.classList.remove('con-active');
    })
    conImgs.forEach(item => {
        item.classList.remove('con-active');
    })
}
function changeBanner(index) {
    removeActive();
    conTitles[index].classList.add('con-active');
    conImgs[index].classList.add('con-active');
}
function autoBanner() {
    changeBanner(curIndex);
    curIndex++;
    if (curIndex > conTitles.length - 1) {
        curIndex = 0;
    }

}
conTitles.forEach((item, index) => {
    // 鼠标移入事件
    item.addEventListener('mouseenter', function () {
        curIndex = index;
        changeBanner(index);
        
    })
    // 鼠标移出事件
    item.addEventListener('mouseleave', function () {
        autoBanner();
        if (curIndex > conTitles.length - 1) {
            curIndex = 0;
            changeBanner(curIndex);
        }
    })
})

conBtnRight.addEventListener('click', function () {
    changeBanner(curIndex);
    curIndex++;
    if (curIndex > conTitles.length - 1) {
        curIndex = 0;
    }
   
})
conBtnLeft.addEventListener('click', function () {
   
    curIndex--;
    if (curIndex <0 ) {
        curIndex = conTitles.length - 1;
    }
    changeBanner(curIndex);
   
})
autoBanner();